<template>
    <div class="region">
        <div class="content">
            <div class="left">地区：</div>
            <ul>
                <li @click="changRegion('')" :class="{ active: RegionFlag == '' }">全部</li>
                <li @click="changRegion(item.value)" :class="{ active: RegionFlag == item.value }"
                    v-for=" item  in  RegionArr " :key="item.value">{{ item.name }}</li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reqHospitalLevelAndRegion } from '@/api/home/index'
import { onMounted, ref } from 'vue';
// 存储地区数据
let RegionArr = ref<any>([])
// 控制地区高亮的数据
let RegionFlag = ref('')
onMounted(() => {
    getRegion()
})
// 获取医院等级的数据
const getRegion = async () => {
    let result = await reqHospitalLevelAndRegion("Beijin")
    if (result.code == 200) {
        RegionArr.value = result.data
    }
}
// 点击不同地区的按钮回调
const changRegion = (item: any) => {
    RegionFlag.value = item
    $emit('getRegion', item)
}

let $emit = defineEmits(['getRegion'])
</script>

<style scoped lang="scss">
.region {
    color: #7f7f7f;
    margin-top: 10px;

    .content {
        display: flex;

        .left {
            margin-right: 10px;
            width: 50px;
        }

        ul {
            display: flex;
            flex-wrap: wrap;

            li {
                margin-right: 10px;
                margin-bottom: 10px;

                &.active {
                    color: #55a6fe;
                }
            }

            li:hover {
                color: #55a6fe;
                cursor: pointer;
            }
        }
    }
}
</style>